<template>
  <div class="data-statistics scroll">
    <!-- 数据统计 -->
    <el-row style="padding: 10px 5px; margin: 0" :gutter="12">
      <el-col :span="4">
        <el-card shadow="hover">设备总数 {{ dataStatistics.wechatAllSize }}</el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">在线设备数 {{ dataStatistics.onLineWeChatSize }}</el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">好友总数 {{ dataStatistics.weChatContactSize }}</el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">群聊总数 {{ dataStatistics.qunContactSize }}</el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">消息数 {{ dataStatistics.weChatMessageSize }}</el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">群消息数 {{ dataStatistics.qunMessageSize }}</el-card>
      </el-col>
    </el-row>

    <!-- 搜索 -->
    <div class="set-parameters">
      <el-date-picker
        v-model="startTime"
        size="small"
        type="date"
        placeholder="选择开始时间"
        :picker-options="pickerOptionsStart"
      ></el-date-picker>
      <el-date-picker
        v-model="endTime"
        style="margin-left: 20px"
        size="small"
        type="date"
        placeholder="选择结束时间"
        :picker-options="pickerOptionsEnd"
      ></el-date-picker>
      <el-button type="primary" size="small" @click="queryData">查询数据报表</el-button>
    </div>

    <!-- 信息展示 -->
    <el-row class="tables-row" style="padding: 10px 5px; margin: 0" :gutter="12">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人聊天发送消息</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <el-table :data="chatMsgSendSize" stripe style="width: 100%" height="300px">
            <el-table-column prop="day" label="日期" header-align="center" align="center"></el-table-column>
            <el-table-column prop="count" label="消息数量" header-align="center" align="center"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人聊天收到消息</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <el-table :data="chatMsgReceivedSize" stripe style="width: 100%" height="300px">
            <el-table-column prop="day" label="日期" header-align="center" align="center"></el-table-column>
            <el-table-column prop="count" label="消息数量" header-align="center" align="center"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>群聊天发送消息</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <el-table :data="qunMsgSendSize" stripe style="width: 100%" height="300px">
            <el-table-column prop="day" label="日期" header-align="center" align="center"></el-table-column>
            <el-table-column prop="count" label="消息数量" header-align="center" align="center"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>群聊天收到消息</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <el-table :data="qunMsgReceivedSize" stripe style="width: 100%" height="300px">
            <el-table-column prop="day" label="日期" header-align="center" align="center"></el-table-column>
            <el-table-column prop="count" label="消息数量" header-align="center" align="center"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryDataTongJi, queryDataBaoBiao } from '@/api/httpApiAdmin'

export default {
  name: 'DataStatistics',
  data() {
    return {
      dataStatistics: {
        wechatAllSize: 0, // 设备总数
        onLineWeChatSize: 0, // 在线设备数
        weChatContactSize: 0, // 好友总数
        qunContactSize: 0, // 群聊总数
        weChatMessageSize: 0, // 聊天消息数
        qunMessageSize: 0 // 群聊消息数
      }, // 数据统计
      startTime: new Date().getTime() - 24 * 60 * 60 * 1000 * 1,
      endTime: new Date().getTime(),
      pickerOptionsStart: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }, // 时间期限
      pickerOptionsEnd: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }, // 时间期限
      tableData: [], // 表格中的数据
      chatMsgSendSize: [], // 个人聊天发送消息
      chatMsgReceivedSize: [], // 个人聊天收到消息
      qunMsgSendSize: [], // 群聊天发送消息
      qunMsgReceivedSize: [] //  群聊天收到消息
    }
  },
  computed: {
    ...mapState({
      adminInfo: 'adminInfo'
    })
  },
  mounted() {
    this.queryDataSilence()
  },
  methods: {
    // 分页查询数据
    queryData() {
      queryDataTongJi(this.adminInfo.cid).then((res) => {
        if (res.code === 0) {
          this.dataStatistics = res.data
        }
      })
      const st = typeof this.startTime === 'object' ? this.startTime.getTime() : this.startTime
      const et = typeof this.endTime === 'object' ? this.endTime.getTime() : this.endTime
      if (st > et) {
        this.$alert('开始时间不能大于结束时间!', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${action}`
          //   });
          // }
        })
        return
      }
      queryDataBaoBiao(this.adminInfo.cid, st, et).then((res) => {
        if (res.code === 0) {
          this.chatMsgSendSize = res.data.chatMsgSendSize || []
          this.chatMsgReceivedSize = res.data.chatMsgReceivedSize || []
          this.qunMsgSendSize = res.data.qunMsgSendSize || []
          this.qunMsgReceivedSize = res.data.chatMsgqunMsgReceivedSizeSendSize || []
          this.$message({
            type: 'success',
            message: '查询成功！',
            duration: 1000
          })
        }
      })
    },
    queryDataSilence() {
      // 数据统计
      queryDataTongJi(this.adminInfo.cid).then((res) => {
        if (res.code === 0) {
          this.dataStatistics = res.data
        }
      })
      // 数据报表
      const st = typeof this.startTime === 'object' ? this.startTime.getTime() : this.startTime
      const et = typeof this.endTime === 'object' ? this.endTime.getTime() : this.endTime
      queryDataBaoBiao(this.adminInfo.cid, st, et).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.rows || []
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.data-statistics {
  height: 100%;
  display: flex;
  overflow: auto;
  flex-direction: column;
  // border: solid red 1px;

  .set-parameters {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    border-bottom: solid $border-color-1 2px;
    .el-button,
    .el-select {
      margin-left: 20px;
    }
  }

  ::v-deep .tables-row {
    .box-card {
      .el-card__body {
        padding: 5px;
      }
    }
  }
}
</style>
